<script setup>
import { computed } from 'vue'
import { ElSelect, ElOption, ElButton } from 'element-plus'

const props = defineProps({
  /** v-model 对象：{ font, size, lineHeight?, bold, italic, underline, align, indent } */
  modelValue: { type: Object, required: true },
  /** 字体/字号/行距备选 */
  fontFamilies: { type: Array, default: () => [] },
  chineseSizes: { type: Array, default: () => [] },
  lineHeights: { type: Array, default: () => [] },
  /** 是否展示行距选择（正文需要，标题可以不需要） */
  showLineHeight: { type: Boolean, default: false },
})

const emit = defineEmits(['update:modelValue'])

const mv = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

function toggle(key) {
  mv.value = { ...mv.value, [key]: !mv.value[key] }
}
function set(key, val) {
  mv.value = { ...mv.value, [key]: val }
}
</script>

<template>
  <div class="grid grid-cols-12 gap-2">
    <!-- 字体 -->
    <ElSelect class="col-span-4" v-model="mv.font" placeholder="字体">
      <ElOption v-for="f in fontFamilies" :key="f" :label="f" :value="f" />
    </ElSelect>
    <!-- 字号 -->
    <ElSelect class="col-span-4" v-model="mv.size" placeholder="字号">
      <ElOption v-for="s in chineseSizes" :key="s" :label="s" :value="s" />
    </ElSelect>
    <!-- 行距（可选） -->
    <ElSelect
      v-if="showLineHeight"
      class="col-span-4"
      v-model="mv.lineHeight"
      placeholder="行距"
    >
      <ElOption v-for="h in lineHeights" :key="h" :label="h" :value="h" />
    </ElSelect>

    <!-- 工具条：B I U / 对齐 / 缩进 -->
    <el-button-group class="col-span-12 flex items-center gap-2 rounded-lg bg-slate-50 px-3 py-2">
      <el-button
        class="px-3 h-9 rounded-md border hover:bg-white"
        :class="mv.bold ? 'border-blue-600 text-blue-600 font-bold' : 'border-slate-300 text-slate-700'"
        @click="toggle('bold')"
        title="加粗"
      >B</el-button>

      <el-button
        class="px-3 h-9 rounded-md border hover:bg-white italic"
        :class="mv.italic ? 'border-blue-600 text-blue-600' : 'border-slate-300 text-slate-700'"
        @click="toggle('italic')"
        title="斜体"
      >I</el-button>

      <el-button
        class="px-3 h-9 rounded-md border hover:bg-white underline underline-offset-4"
        :class="mv.underline ? 'border-blue-600 text-blue-600' : 'border-slate-300 text-slate-700'"
        @click="toggle('underline')"
        title="下划线"
      >U</el-button>
    </el-button-group>
    <ElSelect class="col-span-4" v-model="mv.align" placeholder="对齐">
        <ElOption label="左对齐" value="left" />
        <ElOption label="居中" value="center" />
        <ElOption label="右对齐" value="right" />
        <ElOption label="两端对齐" value="justify" />
      </ElSelect>

      <ElSelect class="col-span-4" v-model="mv.indent" placeholder="缩进">
        <ElOption label="0" value="0" />
        <ElOption label="2em" value="2em" />
        <ElOption label="4em" value="4em" />
      </ElSelect>
  </div>
</template>
